//default layout 样式风格
/*@sidebar-nav-bg                   : #fff; //#404040;
@sidebar-nav-sub-bg                 : #fff; //#404040;
@sidebar-nav-logo                   : #0b467e;
@sidebar-nav-selected-bg            : #e6f7ff; //#333;
@sidebar-nav-selected-border-right  : none;
@sidebar-nav-content-color          : rgba(0, 0, 0, .65); //rgba(255,255,255,.67);
@sidebar-nav-content-hover-color    : #0b467e;
@sidebar-nav-box-shadow             : none;
@sidebar-nav-overflow-x             : hidde;
@top-bar-bg                         : #0b467e;
@top-bar-content-color              : #fff;
@top-bar-content-hover-color        : #fff;
@top-bar-box-shadow                 : none;
@content-bg                         : #f8f8f8;*/

@sidebar-nav-bg                   : #001529; //#404040; #fff;
@sidebar-nav-sub-bg               : #001529; //#404040; #fff;
@sidebar-nav-logo                 : #0b467e;
@sidebar-nav-selected-bg          : #2679c7; //#e6f7ff; //#333;
@sidebar-nav-selected-border-right: none;
@sidebar-nav-content-color        : rgba(0, 0, 0, .65); //rgba(255,255,255,.67);
@sidebar-nav-content-hover-color  : #0b467e;
@sidebar-nav-box-shadow           : none;
@sidebar-nav-overflow-x           : hidde;
@top-bar-bg                       : #0b467e;
@top-bar-content-color            : rgba(0, 0, 0, .85); //#fff;
@top-bar-content-hover-color      : rgba(0, 0, 0, .85); //#fff;
@top-bar-box-shadow               : none;
@content-bg                       : #f8f8f8;
@menu-collapsed-width             : 80px; //64px;

// 侧边栏===============侧边栏一级容器
.alain-default__aside {
    flex      : 0 0 256px;
    margin-top: 0px;
    min-height: 100vh;
    box-shadow: @sidebar-nav-box-shadow;
    //position: relative;
    z-index   : 10;
    position  : fixed;
    top       : 0;
    left      : 0;
}

.alain-default__aside-inner {
    // 侧边栏二级容器
    overflow-x      : hidden;
    overflow-y      : hidden;
    display         : block;
    min-height      : 100vh;
    box-shadow      : @sidebar-nav-box-shadow;
    position        : relative;
    z-index         : 10;
    background-color: @sidebar-nav-bg;
}

.alain-default__header-logo {
    // 侧边栏logo
    display    : block;
    height     : 64px;
    position   : relative;
    line-height: 64px;
    transition : all .3s;
    background : @sidebar-nav-logo;
    overflow   : hidden;
    width      : 100%;
    margin     : 0px auto;
    box-shadow : @top-bar-box-shadow;
}

.alain-default__aside-user-info {
    // 侧边栏用户信息
    color: @sidebar-nav-content-color;
}

.sidebar-nav {
    // 侧边栏菜单顶级节点
    background  : @sidebar-nav-bg;
    border-right: 0px;

    .ant-menu-submenu>.ant-menu {
        // 侧边栏二级菜单下拉
        background-color: @sidebar-nav-sub-bg;
    }

    .ant-menu-item>a,
    .ant-menu-submenu>div {
        // 侧边栏菜单项内容(hover)颜色
        color: @sidebar-nav-content-color;

        &:hover {
            color: @sidebar-nav-content-hover-color;
        }
    }
}

.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    // 侧边栏菜单项选中背景色
    background-color: @sidebar-nav-selected-bg;
    border-right    : @sidebar-nav-selected-border-right;
}

.cdk-overlay-pane {
    // 侧边栏菜单顶级节点
    border-right: 0px;

    .ant-menu-submenu>.ant-menu {
        // 侧边栏二级菜单下拉
        background-color: @sidebar-nav-sub-bg;
    }

    .ant-menu-item>a,
    .ant-menu-submenu>div {
        // 侧边栏菜单项内容(hover)颜色
        color: @sidebar-nav-content-color;

        &:hover {
            color: @sidebar-nav-content-hover-color;
        }
    }
}

// 顶部菜单栏容器
.ant-layout-header {
    position  : fixed;
    top       : 0;
    left      : 0;
    width     : 100%;
    padding   : 0px;
    background: @sidebar-nav-bg;
    z-index   : 1;
}

// 顶部菜单栏
.alain-default__header {
    background: @top-bar-bg;
    box-shadow: @top-bar-box-shadow;
}

// 顶部菜单项
.alain-default__nav-item,
.alain-default__item {
    color: @top-bar-content-color;

    &:hover {
        color: @top-bar-content-hover-color;
    }
}

.alain-default__collapsed {
    .alain-default__header-logo {
        width: 100%;
    }

    .ant-pro-content {
        display       : flex;
        flex-direction: column;
        flex          : auto;
        background    : @content-bg;
        min-height    : 0;
    }

    .alain-default__aside {
        width: 80px;
    }
}

// 菜单和内容响应式
@media (max-width: 767px) {

    .ant-layout-sider,
    .ant-pro-content {
        transition: transform 0.3s ease;
    }

    .ant-layout-sider {
        position: fixed;
    }

    .alain-default {
        .ant-pro-content {
            transform : translate3d(200px, 0, 0);
            min-height: 100vh;
        }
    }

    .alain-default__collapsed {
        .ant-layout-sider {
            transform: translate3d(-100%, 0, 0);
        }

        .ant-pro-content {
            transform : translateZ(0);
            min-height: 100vh;
        }

        .alain-default__aside {
            width: 80px;
        }
    }
}